<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-user-select: none;
            user-select: none;
        }
        #drag{
            width: 1200px;
            box-shadow: 0 0 10px #000;
            margin: 50px auto 0;
            overflow: hidden;
        }
        #drag .left{
            width: 400px;
            height: 500px;
            background: pink;
            float: left;
        }
        #drag .left div{
            height: 50%;
            position: relative;
        }
        #drag .left .img span{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
/*
        #drag .left .img span:nth-child(1){
            background: url(img/1.png) center center/100% no-repeat;
        }
        #drag .left .img span:nth-child(2){
            background: url(img/2.png) center center/100% no-repeat;
        }
        #drag .left .img span:nth-child(3){
            background: url(img/3.png) center center/100% no-repeat;
        }
        #drag .left .img span:nth-child(4){
            background: url(img/4.png) center center/100% no-repeat;
        }
*/

        #drag .right{
            width: 800px;
            height: 500px;
            float: left;
        }

        #drag .right span{
            float: left;
            width: 50%;
            height: 50%;
            /*box-shadow: inset 0 0 50px rgba(0,0,0,0.5);*/

            font-size: 20px;
            text-align: center;
            line-height: 12.5em;
            color: white;
        }
/*        #drag .right span:nth-child(1){
            background: url(img/1.png) center center/100% no-repeat;
        }
        #drag .right span:nth-child(2){
            background: url(img/2.png) center center/100% no-repeat;
        }
        #drag .right span:nth-child(3){
            background: url(img/3.png) center center/100% no-repeat;
        }
        #drag .right span:nth-child(4){
            background: url(img/4.png) center center/100% no-repeat;
        }
*/
        #btn{
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 0 auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="drag">
        <div class="left">
            <div><img draggable="false" src="img/bg.jpg" width="100%" height="100%" alt=""></div>
            <div class="img">
                <!--
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                -->
            </div>
        </div>
        <div class="right">
            <!--
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            -->
        </div>
    </div>

    <div id="btn">后退一步</div>
    <script>
        var oImg = document.querySelector('.img');
        var oRight = document.querySelector('.right');


        var arr = [];
        var arr1 = [];
        for( var i=1;i<=4;i++ ){
            arr[i-1] = i;
            arr1 = arr.sort(randomSort);
        }
        function randomSort() {
            return  Math.random() > 0.5 ? 1 : -1;
        }
        //console.log( arr1 );

        for( var i=0;i<arr1.length;i++ ){
            oImg.innerHTML += '<span draggable="true" style="background: url(img/'+arr1[i]+'.png) center center/100% no-repeat;"></span>';
            oRight.innerHTML += '<span style="background:'+randomBgc()+' ">'+(i+1)+'</span>';
        }
        btn.style.background = randomBgc();
        var aSpan = oImg.querySelectorAll('span');
        var aTarget = oRight.querySelectorAll('span');
        for( var i=0;i<aSpan.length;i++ ){
            aSpan[i].index = i;
            aSpan[i].ondragstart = function () {
                This = this.index;
                //this.innerHTML = '开始拖拽';
            };

            aTarget[i].ondragover = function (e) {
                e.preventDefault();
            };

            aTarget[i].ondrop = function () {
                if( !this.onOff ){
                    var i = aSpan[This];
                    var inner = this.innerHTML;
                    var T = this;
                    var str = this.style.background;
                    this.innerHTML = '';
                    console.log( This );
                    this.style.background = aSpan[This].style.background;
                    oImg.removeChild(aSpan[This]);

                    btn.onclick = function () {
                        T.style.background = str;
                        T.innerHTML = inner;
                        oImg.appendChild(i);
                        T.onOff = false;
                    };
                    this.onOff = true;
                }
            };
        }


        function randomBgc() {
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            return 'rgb('+r+','+g+','+b+')';
        }
    </script>
</body>
</html>